1. 简介
1.1 应用场景
FineBI 的仪表板除了可以在 PC 端查看之外，还可以在移动端，如手机、pad 端进行查看，让最终用户可以不通过 PC 就可以方便地用手指触摸的方式浏览查看系统中的模板。
而查看的方式也有很多种，包括数据分析 App、微信、钉钉、手机浏览器等，下面将对移动端的制作进行具体的介绍。
注：手机端只支持 Android 和 iOS 系统。
1.2 实现思路
FineBI 在仪表板界面提供了移动端布局功能，方便用户设计移动端仪表板展示的组件及展示顺序。在仪表板编辑界面点击「移动端布局」进入界面。
进行配置前，建议新手先大致了解移动端布局的配置功能后，再进行配置。详情请参见文档：移动端布局
1.3 制作流程
方式一：PC端直接转换
当PC 和移动端样式差别不大、风格一致时。没有用到大量的悬浮，即移动端能够还原。此时可以 PC端直接转移动端
方式二：单独配置移动端
当移动端需要特殊的设计、样式要区别 PC 进行设计时。此时将 PC 另存为一份，然后再单独配置移动端。
注：后续同步修改需要维护两个仪表板。
2. 制作移动端仪表板
在进行移动端样式设计之前，先将所需要的组件添加到「仪表板」中，在移动端看板中才会展示对应内容；「过滤组件、其他组件」同理。这是进行移动端设计的前提！
2.1 整体页面样式设置
2.1.1 选择合适的移动端画布
为了在 PC 模拟最接近移动端的效果，提供不同手机型号的画布大小配置，我们切换到和手机最适配的画布，如下图所示：
2.1.2 设置移动端背景
方式一：移动端会自动继承PC仪表板的背景。移动端的背景可以通过「仪表板」中「仪表板样式」进行设置。在「仪表板」中设置好主题颜色，再切换回移动端布局中，即是相应的主题颜色。如下图所示：
方式二：根据主题颜色自主设置背景的颜色或图片。如下图所示：
可以参考的背景图片：
2.1.3 隐藏组件
仪表板中一些用于优化图表效果的组件，无需在移动端展示。此时可以在移动端布局中隐藏这些组件。在移动端布局界面，点击组件左上角「隐藏」按钮，组件移动到「隐藏的组件」中。隐藏的组件将不在移动端显示。隐藏该组件后，之后的组件依次向上移动。如下图所示：
2.1.4 组件间隙
点击「样式设置」，组件间隙设置「10/8」，在左侧可以看见实现效果。如下图所示：
2.1.5 图表字体
推荐使用「自适应」，则会根据组件大小调整字号。如下图所示：
2.1.6 隐藏全屏按钮
一些指标卡、仪表板等一目了然的组件，建议隐藏全屏按钮，美化移动端查看时的整体效果。
点击目标组件（如指标卡）关闭「显示全屏按钮」。如下图所示：
2.2 组件样式设置
2.2.1 标题设置
1）仪表板标题
移动端组件标题/文本组件支持单独配置移动端样式。
注：不会影响PC效果。
文本组件（推荐字号 24 、字体：庞门正道标题体、背景透明 、文本居中）
2）组件标题
6.0.15版本之后，FineBI支持直接在移动端看板中进行组件标题的设置，不用再反复地切换回「仪表板」中进行设置。
注：对于Tab组件，「移动端布局」中只能设置Tab组件的标题，对于Tab组件中子组件的标题和样式设置，需要返回「仪表板/组件」中进行设置
2.2.2 图标配置
使用「图片组件」，推荐使用一些背景透明的矢量图标，并且将组件背景设置为透明
注：「图片组件」需要在「PC仪表板」中进行添加。
2.2.3 过滤组件
「过滤组件」不是特别多时，建议将「过滤组件」加在页面中能让用户查看时快速了解到筛选的范围，调整参数也会更加便利；
当「过滤组件」非常多时可以统一显示在参数面板中
推荐配置
a.「显示全部过滤组件在参数板中」开关关闭，过滤组件将展示在布局中
b.调整过滤组件宽度，放到标题下方。建议一排两个排放。
注：过滤组件的样式设置需要返回 PC仪表板中进行设置
c.回到「仪表板样式」中调节「过滤组件」样式（看场景自定义）
标题字体：和背景对比度高的字体颜色
圆角边框：圆角 6 （圆润点） 边框 0
主题色：透明色
2.2.4 关键指标
当仪表板中存在KPI数值需要进行突出显示时，我们常采用KPI指标卡进行设计。同时我们也将这些需要进行突出显示的指标成为「关键指标」。
1）KPI指标制作
将指标拖入分析区域，图形属性选择「KPI指标卡」指标卡即可。制作请参考帮助文档：KPI指标卡
注：拖入的「指标」，指标值不能为空，否则KPI指标卡不生效。
拖入多个指标，可同时显示多个数值。点击「文本设置」中的编辑按钮，即可进入KPI指标卡设计页面，可以根据自己的需求进行相应的KPI指标卡设计
FineBI还支持对指标卡中的数值进行「形状」标记，可以利用条件属性设置形状及形状颜色
2）常见指标卡布局
指标卡的设计灵活多样，根据自身的不同需求，具有很大的发展空间。在这里我们只列举几个比较常见的样式进行制作展示，有助于帮助大家快速了解移动端指标卡的样式设计。
A.样式一：单个“指标名称+数字”同行展示
当“指标卡”中存在“指标名称”和“数字”，并且希望在一排展示时，推荐：
指标名称/数字同一行居左，空格键调整“指标名称”和“数字”间距，分别设置字体样式。
指标名称「同比增长率：」：字体：默认；字号：14；加粗；居左。
指标数值「49.17%」：字体：默认；字号：12；加粗；居左。
B.样式二：单个“指标名称+数字”分行展示
当【指标卡】中只存在“指标名称”和“数字”的时候，推荐：
指标名称/数值各占一行，居中显示。
字体：默认；
总毛利额：字号：20；居中
毛利额（求和）：字号：30；加粗；颜色：b55140；居中
C.样式三：多个“指标名称+数字”同行展示
有时根据需求和美观设计，可以将一些“指标”放在同行进行展示。
推荐：
指标名称/指标数值居左，各占一行；
当有多个副指标时，通过空格键调整间距。
字体：庞门正道标题体；字号：16；加粗；居左。
D.样式四：多个“指标名称+数字”分行展示
当「指标卡」中有多个指标时，建议将相关的指标信息尽可能通过单个指标卡进行传达；通过调整文本的大小、颜色优化布局展示。
推荐：
指标名称/指标数值居左，各占一行；
当有多个副指标时，通过换行调整位置与行间距。
标题：字号：12；居左
指标：字号：20；加粗；居左
3）常见指标卡样式
A.指标卡中插入形状
在指标卡中添加形状，可以达到辅助突出显示的效果。
B.选择自适应方式
强烈建议使用「标准自适应」，「整体自适应」会因为文本长度放缩导致各 「指标卡」字体大小不一致
C.使用“组合”功能
当有多个指标卡集中显示的时候，推荐使用「组合」将所需要的「指标卡」组合在一起进行展示
甚至还可以进一步对组合后的「指标卡」进行组合「样式设置」，使得版块更加清晰和突出
具体的样式设置案例可以参考文档：组件组合
注：「组件成组」功能不仅可以解决多个「指标卡」样式设计问题，还可以解决「指标卡」对齐问题
例子：
“多个指标名称+数字”设计可制作了两个KPI指标卡，然后使用「组件成组」，更方便指标的对齐。
指标卡1：
指标名称「上年同期销售额/同比增长率」：字体：默认；字号：18；加粗；居左
自适应方式：标准自适应（推荐）
指标卡2：
【订单金额年同期（求和）/同比增长率（聚合）】：字体：默认；字号：18；加粗；居右
【同比增长率（聚合）】：自定义形状
自适应方式：标准自适应（推荐），确保字体能够保持一致的大小
组件成组：
通过简单的点击将两个组件组合，可以方便指标的对齐，点击也不会出现阴影效果。
2.3 常规图表展示
看板中常规图表的展示。主要有几个制作思路：
1）保证充足的图形空间
图形空间可能会被其他元素挤压导致显示不全，页面信息密度很低。
常见的优化方式：横纵轴标题去除、轴标签字号调小、图例字号调小或关闭、缩小组件内边距
2）利用 tab 组件节省篇幅 提升信息密度
如果将图表平铺开展示的信息密度会很低，
常见的方法：将几个有关联的组件做在同一个 「tab 组件」中，用 tab 来进行区分
3）利用组件成组+调整内边距营造区块感，提升信息密度
3.参考demo案例
我们提供了3套可以参考的移动端demo制作案例，新手可以根据相对应的指导手册去设计类似的移动端看板。
（1）医疗移动端手册
参考图：
（2）人力移动端手册
参考图：
（3）零售移动端手册
参考图：
4. 移动端模板包装
4.1 应用封装
应用场景：需要将多个看板组合形成一个类app应用，完成业务数据的展示。
操作步骤：应用封装
环境要求：BI 版本 6.0.14 及之后 ，安装「应用封装」插件（免费）
用户支持自由组合应用封装内每个 tab 的显示内容，支持添加超链接，可放置「数据门户」的页面链接进行组合。
还支持自定义 tab 页名称、图标样式。设置导航栏样式等。如下图所示：
导航结构：
两层资源层级：建议一级底部+二级顶部
一层资源层级：建议一级顶部
样式：
根据主题风格自定义导航栏颜色、图表颜色等
封装好的应用。可将链接分享给其他人，或者挂出到 目录 中。
4.2 数据门户
功能场景：
企业统一的数据查看入口，将用户的核心看板都集中展示在门户首页
可以通过应用封装打包几个看板成一个应用，挂载门户上。门户本身也可以以链接的形式挂载在应用封装
BI移动端推荐使用方式：将「数据门户」作为移动端的「首页」，利用门户的功能添加核心指标与看板入口
功能说明：参考 数据门户 中的制作方法
5. 移动端常见问题及解决方式
详情参考链接：移动端常见问题
上一篇：[通用]目录样式插件
